<template>
	<div class="login-page-wrap">
		<div class="xieyi-outer-wrap" style="display: none;" ref="xieyi">
			<xieyi ref="xieyicomp"></xieyi>
		</div>
		<div class="xieyi-outer-wrap" style="display: none;" ref="policy">
			<privacy-policy></privacy-policy>
		</div>
		<div class="login-page-header-wrap">
			<i class="icon-back" @click="back"></i>
			<div class="login-page-header">注册</div>
		</div>
		<div class="login-body-wrap">
			<div class="login-page-item-wrap">
				<div class="login-page-item border-1px fix">
					<i class="login-icon icon-user"></i>
					<input type="text" placeholder="用户名" class="login-input" v-model="regForm.username">
				</div>
				<div class="login-page-item border-1px fix">
					<i class="login-icon icon-user"></i>
					<input type="text" placeholder="昵称(可不填)" class="login-input" v-model="regForm.nickname">
				</div>
				<div class="login-page-item border-1px fix flex">
					<i class="login-icon icon-password"></i>
					<input :type="pwdType" placeholder="密码" class="login-input" v-model="regForm.password" style="flex:1">
					<i class="login-icon" :class="[this.pwdType === 'text'? 'icon-password-see':'icon-password-nosee']" @click="showPwd"></i>
				</div>
				<div class="login-page-item border-1px fix flex">
					<i class="login-icon icon-password"></i>
					<input :type="confirmPwdType" placeholder="确认密码" class="login-input" v-model="regForm.confirmPassword" style="flex:1">
					<i class="login-icon" :class="[this.confirmPwdType === 'text'? 'icon-password-see':'icon-password-nosee']" @click="showConfirmPwd"></i>
				</div>
				<div class="login-page-item  fix" style="border: 0 none;" v-show="!is_official">
					<div class="checkbox-wrap fl">
						<input type="checkbox" id="agreexieyi" class="clip agree-radio" v-model="agreechecked">
						<label for="agreexieyi" class="radio-label"></label>
					</div>
					<div class="fl" style="font-size: 0.87rem;color: #666;">同意<a href="javascript:;" class="login-a-wrap" @click="showXieyi">《1234tv服务条款》</a><a href="javascript:;" class="login-a-wrap" @click="showPrivacyPolicy">《隐私政策》</a></div>
				</div>
				<div class="login-page-item" style="border:0 none;">
					<!-- <div class="error-msg" v-show="errorMsg" >{{errorMsg}}</div> -->
					<div id="captcha"></div>
				</div>
			</div>
<!-- 			<div class="login-a-wrap flex" style="justify-content: space-between;">
				<a href="">忘记密码?</a>
				<a href="">注册</a>
			</div> -->
			<div class="login-btn-wrap">
				<div class="login-btn" @click="register">下一步</div>
			</div>
		</div>
		<div class="bind-phone-outer-wrap" :class="{'active':active}">
			<bind-phone></bind-phone>
		</div>
	</div>
</template>

<script>
	import {reg} from '@/api/login'
	import xieyi from '@/views/reg/components/xieyi2'
	import PrivacyPolicy from '@/views/reg/components/PrivacyPolicy'
	import bindPhone from './components/bindPhone'
	import {stringLen} from '@/utils'
	import {getPath} from '@/utils/auth'
	import mixin from '@/mixins/removeLoading'
	import md5 from 'js-md5'
	export default{
		name:'register',
		metaInfo: {
		  title: '注册',
			meta: [{
		    name: 'keywords',
		    content: '1234tv.com、1234tv财经直播、财经直播平台、财经视频、财经直播系统、财经直播间、财经直播视频、财经直播教程'
		  },{
				name: 'description',
				content: '专注互联网财经视频直播服务，致力为金融行业从业者、投资者、财经院校师生提供专业、综合性互联网财经直播服务平台。'
			}],
		},
		mixins: [mixin],
		data(){
			return{
				regForm:{
					username:'',
					password:'',
					confirmPassword:'',
					nickname:'',
					NECaptchaValidate:''
				},
				pwdType:'password',
				confirmPwdType:'password',
				errorMsg:'',
				agreechecked:false,
				active:false,
				is_official: typeof(window.is_official) !== 'undefined' ? window.is_official : false
			}
		},
		components:{xieyi,bindPhone,PrivacyPolicy},
		creatd(){
			this.captchaIns = null
		},
		methods:{
			back(){
				this.$router.go(-1)
			},
			showPwd(){
				if(this.pwdType === 'password'){
					this.pwdType = 'text'
				}else{
					this.pwdType = 'password'
				}
			},
			showConfirmPwd(){
				if(this.confirmPwdType === 'password'){
					this.confirmPwdType = 'text'
				}else{
					this.confirmPwdType = 'password'
				}
			},
			showXieyi(){
				this.$layer.open({
					 type: 1
					,content: this.$refs.xieyi.innerHTML
					,className:'custom-layer'
				});
			},
			showPrivacyPolicy(){
				this.$layer.open({
					 type: 1
					,content: this.$refs.policy.innerHTML
					,className:'custom-layer'
				});
			},
			register(){
				if(this.regForm.username){
					if(!new RegExp("^([a-zA-Z0-9])+$").test(this.regForm.username)){
						this.errorMsg = '用户名须为字母、数字组合'
					}else if(/^\d+$/.test(this.regForm.username)){
						this.errorMsg = '用户名不能全是数字'
					} else if(this.regForm.username.length<6){
						this.errorMsg = '用户名长度至少6位'
					}else if(this.regForm.username.length>20){
						this.errorMsg = '用户名长度不能超过20位'
					}else{
						this.errorMsg = ''
					}
					if(this.errorMsg){
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '用户名必须填写!'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false
				}
				if(this.regForm.nickname){
					if(!/^(\w|[\u4e00-\u9fa5])+$/.test(this.regForm.nickname)){
						this.errorMsg = '昵称只能是汉字、大小写字母、数字和下划线组成'
					}
					else if(this.regForm.nickname.length>10){
						this.errorMsg = '昵称不能超过10个字符'
					}else {
						this.errorMsg = ''
					}
					if(this.errorMsg){
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = ''
				}
				if(this.regForm.password){
					if(this.regForm.password.match(/([\u4e00-\u9fa5]|\s)/)){
						this.errorMsg = '密码不可以包含中文和空格'
					}else if(this.regForm.password.length<6){
						this.errorMsg = '密码长度至少6位'
					}else if(this.regForm.password.length>20){
						this.errorMsg = '密码长度不能超过20位'
					}else if(this.regForm.confirmPassword){
						if(this.regForm.confirmPassword !== this.regForm.password){
							this.errorMsg = '确认密码和密码不一致'
						}else{
							this.errorMsg = ''
						}
					}else{
						this.errorMsg = ''
					}
					if(this.errorMsg){
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '请输入密码'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false
				}
				if(this.regForm.confirmPassword){
					if(this.regForm.confirmPassword.match(/([\u4e00-\u9fa5]|\s)/)){
						this.errorMsg = '确认密码不可以包含中文和空格'
					}else if(this.regForm.confirmPassword.length<6){
						this.errorMsg = '确认密码长度至少6位'
					}else if(this.regForm.confirmPassword.length>20){
						this.errorMsg = '确认密码长度不能超过20位'
					}else if(this.regForm.password){
						if(this.regForm.password !== this.regForm.confirmPassword){
							this.errorMsg = '确认密码和密码不一致'
						}else{
							this.errorMsg = ''
						}
					}else{
						this.errorMsg = ''
					}
					if(this.errorMsg){
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '请输入确认密码'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false
				}
				if(!this.is_official){
					if(!this.agreechecked){
						this.errorMsg = '请同意1234tv服务条款!'
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}
				if(this.regForm.NECaptchaValidate === ''){
					this.errorMsg = '请先验证!'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					});
					return false
				}
				let loadingIndex = this.$layer.open({type: 2});
				this.$store.dispatch('Reg',{username:this.regForm.username,password:md5(this.regForm.password + process.env.VUE_APP_SALT),password_confirmation:md5(this.regForm.confirmPassword + process.env.VUE_APP_SALT),NECaptchaValidate:this.regForm.NECaptchaValidate,v:2,nickname:this.regForm.nickname}).then((res)=>{
					this.$layer.close(loadingIndex)
					let index = this.$layer.msg(res.message)
					setTimeout(()=>{
						this.$layer.close(index)
						this.active = true
					},1000)
				}).catch(err=>{
					this.$layer.close(loadingIndex)
					this.regForm.NECaptchaValidate = ''
					this.captchaIns.refresh()
					if(err.data && err.data.message && Array.isArray(err.data.message)){
						this.$layer.open({
							content: err.data.message[0]
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
					}
				})
			},
		},
		mounted(){
			let that = this
			initNECaptcha({
				captchaId: 'b280b14b93ba4e2c9cf3d25a922cd0ab',
				element: '#captcha',
				mode: 'float',
				onVerify: (err,res)=>{
					if(!err){
						this.regForm.NECaptchaValidate = res.validate
						if(this.errorMsg === '请先验证!'){
							this.errorMsg = ''
						}
					}
				}
			}, function onload (instance) {
				// 初始化成功后，用户输入对应用户名和密码，以及完成验证后，直接点击登录按钮即可
				that.captchaIns = instance
			}, function onerror (err) {
				// 验证码初始化失败处理逻辑，例如：提示用户点击按钮重新初始化
			})
		},
	}
</script>

<style lang='scss' scoped>

</style>
